<template>
	<view>
		<u-skeleton v-if="!list.length" rows="3"></u-skeleton>
		<view v-if="list.length">
			<u-grid>
				<u-grid-item v-for="item in list" :key="item._id" @click="godetail(item._id)">
					<image :src="item.smallPicurl" mode="aspectFill"></image>
				</u-grid-item>
			</u-grid>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script setup>
	import { getList } from '../../utils/api.js'
	let list = ref([])
	let id = ''
	let pageNum = 1
	let status = ref('loadmore')
	let hasmsg = ref(false)
	onLoad(async (e) => {
		id = e.id
		uni.setNavigationBarTitle({
			title: e.name
		})
		let res = await getList(id, pageNum)
		list.value = res.data
		console.log(res);
		uni.setStorageSync('picinfo', list.value)
	})
	const godetail = (id) => {
		uni.navigateTo({
			url: "/pages/detail/detail?id=" + id
		})
	}
	onReachBottom(async () => {
		if (!hasmsg.value) {
			console.log(1, pageNum);
			status.value = 'loading'
			pageNum++
			let newarr = []
			let res = await getList(id, pageNum)
			if (res.data.length === 0) {
				status.value = 'nomore'
				hasmsg.value = true
				return
			}
			newarr = res.data
			list.value = [...list.value, ...newarr]
			uni.setStorageSync('picinfo', list.value)
		}
	})
</script>

<style scoped lang='scss'>
	image {
		width: 230rpx;
		height: 400rpx;
		padding: 10rpx 0;
	}
</style>